import { Button, Modal } from "antd";
import { ButtonStyle } from "../../../config/globalStyle";
import "./index.less";

interface BaseModalProps {
  isModalOpen?: boolean;
  footer?: boolean;
  maskClosable?: boolean; // 点击蒙层是否允许关闭
  handleOpen?: (params?: any) => void;
  handleConfirm?: () => void;
  handleClose?: () => void;
  ModalChildren?: any;
  title?: string;
  cancelButtonName?: string;
  sumbitButtonName?: string;
  width?: string;
}

const BaseModal = (props: BaseModalProps) => {
  const {
    width = "520px",
    footer = true,
    maskClosable = true,
    isModalOpen,
    handleClose,
    handleConfirm,
    title,
    ModalChildren,
    cancelButtonName = "取消",
    sumbitButtonName = "发布"
  } = props;
  // console.log(props);

  return (
    <>
      <Modal
        width={width}
        className="customModal"
        maskClosable={maskClosable}
        title={title}
        open={isModalOpen}
        onOk={handleClose}
        onCancel={handleClose}
        footer={false}
      >
        <ModalChildren />
        {footer && (
          <div
            style={{
              display: "flex",
              justifyContent: "space-between"
            }}
          >
            <Button
              key="cancel"
              onClick={handleClose}
              className="cancel-button"
              style={ButtonStyle}
            >
              {cancelButtonName}
            </Button>
            <Button
              key="submit"
              type="primary"
              onClick={handleConfirm}
              className="cancel-button"
              style={ButtonStyle}
            >
              {sumbitButtonName}
            </Button>
          </div>
        )}
      </Modal>
    </>
  );
};

export default BaseModal;
